<template>
  <div class="info">
    <el-row class="row">
      <el-col class="c1">
        <el-descriptions label-width="80px" :column="1">
          <el-descriptions-item label="店铺名称">
            {{ form.name }}
          </el-descriptions-item>
          <el-descriptions-item label="店铺简介">
            {{ form.describe }}
          </el-descriptions-item>
          <el-descriptions-item label="创建于">
            {{ form.createdAt | date }}
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col class="c2">
        <el-image class="cover" :src="form.cover | imgurl" />
      </el-col>
    </el-row>
    <div class="center">
      <el-button type="primary" icon="el-icon-edit" v-to="{ name: 'myshop-editing' }">编辑</el-button>
    </div>
  </div>
</template>

<script>
import { myShop } from '@/api/shop'

export default {
  data() {
    return {
      form: {
        id: 0,
        name: '',
        describe: '',
        createdAt: 0,
      },
    }
  },
  methods: {
    async init() {
      const data = await myShop()
      if (data.code !== 200) {
        this.$message.warning('请先创建店铺')
        this.$router.replace({ name: 'myshop-editing' })
        return
      }
      this.form = data.data
    },
  },
  created() {
    this.init()
  },
}
</script>

<style lang="scss" scoped>
.row {
  display: flex;
  .c1 {
    flex: 1;
  }
  .c2 {
    margin-left: 16px;
    width: 300px;
  }
}
.cover {
  width: 300px;
  height: 300px;
}
</style>
